import React, { useEffect, useState } from 'react';
import { Form, Input, Grid, Card, Statistic } from 'semantic-ui-react';

import { useSubstrate } from './substrate-lib';
import { TxButton } from './substrate-lib/components';

function Main (props) {
  const { api } = useSubstrate();
  const { accountPair } = props;

  // The transaction submission status
  const [status, setStatus] = useState('');

  // The currently stored value,配置交易对儿的值.
  const [tokenList, setTokenList] = useState([]);
  const [balanceOfLink1, setBalanceOfLink1] = useState([]);
  const [balanceOfLink2, setBalanceOfLink2] = useState([]);
  const [balanceOfLink3, setBalanceOfLink3] = useState([]);
  const [balanceOfLink4, setBalanceOfLink4] = useState([]);
  // const [formValue, setFormValue] = useState(0);
  //定义地址. 
  const aliceAddress = "5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY";
  const bobAddress = "5FHneW46xGXgs5mUiveU4sbTyGBzmstUspZC92UhjJM694ty";
  const token1Hash = "0xf1ab7e13e5b44ca4709ee40b8daa8b5993ce340af2a45b2f42a7cd79ec266ec9";
  const token2Hash = "0xd04e0686e96ae542caee32fdd58a9fa7ac8c018baee263fe641f402f40708b58";
  const token3Hash = "0x6c514c6a395ce8382782bc49faa2ed67d43bfd112baa2bb3a10727be90ab3cf4";
  const tradePaire = "0x4d86cb882a3692da4d4e7f20baa21389f5da08fd634d4a2d179cb7a3eb659739";

  useEffect(() => {
    // 定义取消订阅的函数
    let tokenUnsubscribe;
    api.query.tokenModule.allTokensVecStorage(0,newValue => {
      // The storag11e value is an Option<Vec<Token<T::Hash, T::Balance>>>
      // So we have to check whether it is None first
      // There is also unwrapOr
      if (newValue.isNone) {
        setTokenList([]);
      } else {
        setTokenList(newValue.unwrap().toArray());
      }
    }).then(unsub => {
      tokenUnsubscribe = unsub;
    }).catch(console.error);
    //查询用户资产1
    let userAssetSub1;
    api.query.tokenModule.accountOfUser([aliceAddress,token3Hash],balanceValue => {
      if (balanceValue.isNone) {
        setBalanceOfLink1([]);
      } else {
        let bv=balanceValue.unwrap();
        let myAccount = {"balance":bv.my_balance.toNumber(),"free":bv.my_free.toNumber(),"freeze":bv.my_freeze.toNumber(),};
        console.log(myAccount);
        setBalanceOfLink1(JSON.stringify(myAccount));
      }
    }).then(unsub => {
      userAssetSub1 = unsub;
    }).catch(console.error);

    //查询用户资产2
    let userAssetSub2;
    api.query.tokenModule.balanceOf([aliceAddress,token2Hash],balanceValue => {
      if (balanceValue.isNone) {
        setBalanceOfLink2([]);
      } else {
        console.log(balanceValue.words[0]);
        setBalanceOfLink2(balanceValue.words[0]);
      }
    }).then(unsub => {
      userAssetSub2 = unsub;
    }).catch(console.error);

    //查询bob的资产3
    let userAssetSub3;
    api.query.tokenModule.balanceOf([bobAddress,token1Hash],balanceValue => {
      if (balanceValue.isNone) {
        setBalanceOfLink3([]);
      } else {
        console.log(balanceValue.words[0]);
        setBalanceOfLink3(balanceValue.words[0]);
      }
    }).then(unsub => {
      userAssetSub3 = unsub;
    }).catch(console.error);

    //查询bob的资产4
    let userAssetSub4;
    api.query.tokenModule.balanceOf([bobAddress,token2Hash],balanceValue => {
      if (balanceValue.isNone) {
        setBalanceOfLink4([]);
      } else {
        console.log(balanceValue.words[0]);
        setBalanceOfLink4(balanceValue.words[0]);
      }
    }).then(unsub => {
      userAssetSub4 = unsub;
    }).catch(console.error);

    return () => tokenUnsubscribe && tokenUnsubscribe();
  }, [api.query.tokenModule]);
  
  return (
    <div>
      {tokenList&&tokenList.map(item=>{
        return <p key={item.hash}>{JSON.stringify(item)}</p>
      })}
      <span>alice:</span>{balanceOfLink1},
      {balanceOfLink2},
      <span>bob:</span>{balanceOfLink3},{balanceOfLink4}
    </div>

    
  );
}

export default function TokenModule (props) {
  const { api } = useSubstrate();
  return (api.query.tokenModule && api.query.tokenModule.allTokensVecStorage
    ? <Main {...props} /> : null);
}
